<template>
  <div class="mask-black-dialog" @click.self="closeNum()" >
    <div class="num-ft" :class="{justClass: flag}">
      <template v-if="flag">
        <div class="confirm-hd-1 k-block"></div>
        <div v-html="mes" class="mes"></div>
      </template>
      <template v-else>
        <span >请输入产品数量</span>
      </template>
      <div class="input-content" :class="{'input-box': flag}">
        <span class="k-money" v-if="flag"></span>
        <input type="tel" v-model="num" maxlength="3" ref='numInput' :class="{inputChange: flag}"/>
      </div>
      <div class="flex btn-box " :class="{justBtn: flag}">
        <a href="javascript:;" class="confirm-btn primary cancel"  @click.stop="closeNum()"  v-if="flag">取消</a>
        <a href="javascript:;" class="confirm-btn primary" @click.stop="closeNum(false, num, opts)">确定</a>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    props: {
      num: Number,
      maxNum: Number,
      minNum: Number,
      opts: {
        type: [Array, Function],
        default: () => {
        }
      },
      flag: Boolean,
      mes: String
    },
    watch: {
      num (val) {
        if (val) {
          if (this.flag && val < this.minNum) {
            this.$notify({mes: `捐款金额最少为${this.minNum}元`})
          }
          this.num = parseInt(val) > this.maxNum ? parseInt(this.maxNum) : (parseInt(val) || (this.flag ? this.minNum : 0))
          if (this.flag && val > this.maxNum) {
            this.$notify({mes: `捐款金额最多为${this.maxNum}元`})
          }
        }
      }
    }
  }
</script>
<style lang="less">
  .num-ft {
    width: 480px;
    height: 300px;
    font-size: 32px;/* px */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 40px;
    background: #fff;
    &.justClass{
      width: 640px;
      height: 380px;
      padding: 0 0 40px;
      display: flex;
    }
    .mes{
      font-weight: 700;
      margin-top: 20px;
    }
     .k-close{
      width: 100%;
      color: #808080;
      padding: 0 30px 0;
      box-sizing: border-box;
      text-align: right;
      font-size: 30px;/* px */
    }
    .input-content{
      width: 100%;
      text-align: center;
    }
    .input-box{
      padding: 40px 0;
      align-items: center;
      justify-content: center;
      .k-money {
         font-size: 28px;/* px */
         color: #dfdfdf;
         position: absolute;
         right: 50%;
         margin-right: 108px;
         height: 85px;
         line-height: 85px;
      }
    }
    .confirm-hd {
      height: 80px;
      line-height: 80px;
      text-align: center;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #dfdfdf;/*no*/
      position: relative;
    }
    .confirm-hd-1 {
      border-radius: 10px;
      height: 20px;
      text-align: center;
      position: relative;
      &.k-block{
        font-size: 100px;/*px*/
      }
    }
    .confirm-title {
      font-size: 36px;/*px*/
      color: #d93035;
      text-align: center;
      border-radius: 10px;
      flex:1;
      display: flex;
      justify-content: center;
    }

    .k-block{
      font-size: 80px;/*px*/
      bottom: 0;
    }
    .confirm-icon{
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 0;
      overflow: hidden;
      transform: rotate(180deg);
      width: 120px;
      left: 50%;
      margin-left: -60px;
    }
    input{
      width: 60%;
      height: 80px;
      margin: 20px 0;
      border: 1px solid #ccc;/* no */
      text-align: center;
      border-radius: 10px;
      &.inputChange{
        margin:0;
        width: 193px;
        height: 85px;
      }
    }
    .btn-box{
      display: flex;
      width: 100%;
      justify-content: center;
    }
     a {
      text-align: center;
      display: block;
      line-height: 90px;
      height: 90px;
      border-radius: 12px;
     }
    .confirm-btn.primary {
      width: 100%;
      background-color: #95b04c;
      border-radius: 10px;
      box-shadow: 0 0 6px rgba(0, 0, 0, .2);
      border: 1px solid #95b04c;/* no */
      color: #fff;
    }
    .confirm-btn.cancel {
       background-color: #fff;
       border: 1px solid #ccc;/* no */
       color: #808080;
       margin-right: 16px;
    }
    .justBtn .confirm-btn{
      width: 258px;
    }
  }
</style>
